<template>
  <div class="menu-management">
    <div class="menu-management-header">
      <h3>菜单管理</h3>
      <a-button type="primary" @click="handleAdd()">新增</a-button>
    </div>
    <div class="menu-management-search">
      <a-input placeholder="请输入菜单名称"></a-input>
      <a-button type="primary">搜索</a-button>
    </div>
    <div class="menu-management-table">
      <a-table column-resizable :columns="columns" :data="data"></a-table>
    </div>
    <!-- 新增 -->
    <a-modal v-model:visible="visible" title="新增菜单" :width="800" @close="close">
      <div>
        <a-form :form="form" :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }">
          <a-form-item label="菜单名称" name="name">
            <a-select v-model="form.name"></a-select>
          </a-form-item>
          <a-form-item label="菜单路径" name="path">
            <a-input v-model="form.path"></a-input>
          </a-form-item>
          <a-form-item label="菜单图标" name="icon">
            <a-input v-model="form.meta.icon"></a-input>
          </a-form-item>
          <a-form-item label="菜单组件" name="component">
            <a-input v-model="form.component"></a-input>
          </a-form-item>
          <a-form-item label="菜单排序" name="order">
            <a-input-number v-model="form.meta.order"></a-input-number>
          </a-form-item>
          <a-form-item label="菜单状态" name="status">
            <a-radio-group v-model="form.status">
              <a-radio value="1">启用</a-radio>
              <a-radio value="0">禁用</a-radio>
            </a-radio-group>
          </a-form-item>
        </a-form>
      </div>
    </a-modal>
  </div>
</template>

<script lang="ts" setup>
import Menujson from '@/mock/menu.json'
import { reactive, ref } from 'vue'
const visible = ref(false)
const form = reactive({
  name: '',
  path: '',
  component: '',
  meta: {
    order: '',
    status: '',
    icon: '',
    locale: '',
  },
})

const columns = [
  {
    title: '菜单名称',
    dataIndex: 'name',

    // customRender: (text: string, record: any) => {
    //   return '666'
    // },
  },
  {
    title: '菜单路径',
    dataIndex: 'path',
  },
  {
    title: '菜单图标',
    dataIndex: 'icon',
  },
  {
    title: '菜单路径',
    dataIndex: 'component',
  },
  {
    title: '菜单排序',
    dataIndex: 'order',
    customRender: (text: string, record: any) => {
      return record.meta.order
    },
  },
  {
    title: '菜单状态',
    dataIndex: 'status',
  },
  {
    title: '操作',
    dataIndex: 'action',
  },
]
const data = reactive(Menujson)

const handleAdd = () => {
  visible.value = true
}
const close = () => {
  visible.value = false
}
</script>
<style lang="less" scoped>
.menu-management {
  padding: 20px;
}
.menu-management-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}
.menu-management-search {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}
.menu-management-table {
  margin-top: 20px;
}
</style>
